<template>
  <el-card>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" @submit.native.prevent>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="form.content" :rows="6" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="图片" prop="images">
        <el-upload
          :file-list="fileList"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          :http-request="uploadImage"
          list-type="picture-card"
          multiple>
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="作者" prop="user_id">
        <el-select v-model="form.user_id" placeholder="请选择作者">
          <el-option v-for="user in userList" :key="user.id" :label="user.username" :value="user.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="previewVisible">
      <img :src="previewImage" style="width: 100%" />
    </el-dialog>
  </el-card>
</template>

<script>
import { addArticle, uploadArticleImage } from '@/api/article'
import { Message } from 'element-ui';
export default {
  name: 'ArticleAdd',
  data() {
    return {
      form: {
        title: '',
        content: '',
        images: [],
        user_id: '',
        status: 0
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        user_id: [{ required: true, message: '请选择作者', trigger: 'change' }]
      },
      fileList: [],
      previewVisible: false,
      previewImage: '',
      userList: []
    }
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      // TODO: 替换为实际接口
      this.userList = [
        { id: 1, username: '张三' },
        { id: 2, username: '李四' }
      ];
    },
    handlePreview(file) {
      this.previewImage = file.url || file.response?.url;
      this.previewVisible = true;
    },
    handleRemove(file, fileListArr) {
      this.form.images = fileListArr.map(f => f.url || f.response?.url).filter(Boolean);
    },
    beforeUpload(file) {
      // 可加类型/大小校验
      return true;
    },
    async uploadImage(option) {
      const formData = new FormData();
      formData.append('file', option.file);
      try {
        const res = await uploadArticleImage(formData);
        option.onSuccess(res.data);
      } catch (e) {
        option.onError(e);
      }
    },
    async onSubmit() {
      this.form.images = this.fileList.map(f => f.url || f.response?.url).filter(Boolean);
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;
        try {
          await addArticle(this.form);
          Message.success('提交成功');
          this.onReset();
        } catch (e) {
          Message.error('提交失败');
        }
      });
    },
    onReset() {
      this.form.title = '';
      this.form.content = '';
      this.form.images = [];
      this.form.user_id = '';
      this.form.status = 0;
      this.fileList = [];
    }
  }
}
</script> 